<template>
  <div v-loading="loading" class="dashboard-container">
    <div class="app-container">
      <el-card shadow="never">
        <el-alert v-if="alertText !== ''" :closable='false' :title="alertText" class="alert" show-icon
                  type="info"></el-alert>
        <!-- 数据 -->
        <el-table :key='tableKey' :data="dataList" border fit
                  highlight-current-row style="width: 100%">
          <el-table-column :label="$t('table.operationType')" align="center">
            <template slot-scope="scope">
              <span>{{ scope.row.type }}</span>
            </template>
          </el-table-column>
          <el-table-column :label="$t('table.operator')" align="center">
            <template slot-scope="scope">
              <span>{{ scope.row.author }}</span>
            </template>
          </el-table-column>
          <el-table-column :label="$t('table.results')">
            <template slot-scope="scope">
              <span>{{ scope.row.title }}</span>
            </template>
          </el-table-column>
          <el-table-column :label="$t('table.operationDate')" align="center">
            <template slot-scope="scope">
              <span>{{ scope.row.display_time }}</span>
            </template>
          </el-table-column>
          <el-table-column :label="$t('table.describe')" align="center">
            <template slot-scope="scope">
              <span>{{ scope.row.forecast }}</span>
            </template>
          </el-table-column>
        </el-table>
        <!-- end -->
        <!-- 分页 -->
        <el-row justify="end" type="flex">
          <el-col :span="8">
            <div class="pagination-container">
              <PageTool :paginationPage="pagination.page" :paginationPagesize="pagination.pageSize"
                        :total="pagination.total" @pageChange="handleCurrentChange" @pageSizeChange="handleSizeChange">
              </PageTool>
            </div>
          </el-col>
        </el-row>
        <!-- end -->
      </el-card>
    </div>
  </div>
</template>
<script>
import PageTool from './../components/page-tool'
import { list } from '@/api/example/table'

export default {
  name: 'base-logs',
  components: {
    PageTool
  },
  data () {
    return {
      dataList: [],
      tableKey: 0,
      total: null,
      listLoading: true,
      dialogStatus: '',
      alertText: '',
      pagination: {
        page: 1,
        total: 0,
        pageSize: 20,
        pageSizes: [20, 50, 80, 120],
        currentPage: 1
      }
    }
  },
  computed: {},
  methods: {
    // 获取列表数据
    getList (page = 1, limit = 20) {
      this.listLoading = true
      this.pagination.currentPage = page
      this.pagination.pageSize = limit
      this.loading = true
      this.alertText = ''
      this.dataList = []
      list({
        page,
        limit
      })
        .then(res => {
          // console.log(res.data)
          this.dataList = res.data.items
          this.pagination.total = res.data.total
          this.alertText = `共 ${this.pagination.total} 条记录`
          this.loading = false
        })
        .catch(e => {
          this.$message.e('错了哦，这是一条错误消息')
          this.loading = false
        })
    },
    // 每页显示信息条数
    handleSizeChange (val) {
      this.pagination.pagesize = val
      if (this.pagination.page === 1) {
        this.getList()
      }
    },
    // 进入某一页
    handleCurrentChange (val) {
      this.pagination.page = val
      this.getList()
    }
  },
  // 创建完毕状态
  created () {
    this.getList()
  }
}
</script>
<style lang="scss" rel="stylesheet/scss" scoped>
.alert {
  margin: 10px 0px;
}

.pagination {
  margin-top: 10px;
  text-align: right;
}
.el-table th {
  background-color: #fafafa;
}

.el-table th.is-leaf {
  border-bottom: 2px solid #e8e8e8;
}
</style>
